﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebGrid.aspx.cs" Inherits="OMSWeb.WebGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>表格</title>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
    <%--<link href="lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
--%>

  <!--  <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script> -->
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
    <script type="text/javascript">
    var grid = null;

        $(function ()
        {
           grid = $("#maingrid3").ligerGrid({
            checkbox: true,
//                columns: [{ display: '主键', name: 'employeeId', width: 200, type: 'int' }, { display: '名字', name: 'name' }, { display: '入职日期', name: 'IncomeDay', type: 'date' }, { display: '地址', name: 'Address', width: 300, align: 'left'}],
columns: [{ display: '主键', name: 'homeChargeId', width: 200, type: 'int' }, { display: '名字', name: 'handleName' }, { display: '缴费时间', name: 'startDate', type: 'date' }],
toolbar: { items: [
                { text: '增加', click: itemclick, icon: 'add' },
                { line: true },
                { text: '修改', click: itemclick, icon: 'modify' },
                { line: true },
                { text: '删除', click: itemclick, img: '../../../lib/ligerUI/skins/icons/delete.gif' }
                ]
                },

                url: "service/DataHandler.ashx?Action=get&View=Home",
                showTitle: false, dataAction: 'server', sortName: 'homeChargeId',
                pageSize: 5,
                pageSizeOptions: [5, 10, 15],where : f_getWhere(),

                isChecked: f_isChecked, onCheckRow: f_onCheckRow, onCheckAllRow: f_onCheckAllRow

            });
        });
        
        
        function itemclick(item)
        {
            alert(item.text);
        }

        
        
        function f_onCheckAllRow(checked)
        {
            for (var rowid in this.records)
            {
                if(checked)
                    addCheckedCustomer(this.records[rowid]['homeChargeId']);
                else
                    removeCheckedCustomer(this.records[rowid]['homeChargeId']);
            }
        }
        
        
        /*
        该例子实现 表单分页多选
        即利用onCheckRow将选中的行记忆下来，并利用isChecked将记忆下来的行初始化选中
        */
        var checkedCustomer = [];
        function findCheckedCustomer(homeChargeId)
        {
            for(var i =0;i<checkedCustomer.length;i++)
            {
                if(checkedCustomer[i] == homeChargeId) return i;
            }
            return -1;
        }
        function addCheckedCustomer(homeChargeId)
        {
            if(findCheckedCustomer(homeChargeId) == -1)
                checkedCustomer.push(homeChargeId);
        }
        function removeCheckedCustomer(homeChargeId)
        {
            var i = findCheckedCustomer(homeChargeId);
            if(i==-1) return;
            checkedCustomer.splice(i,1);
        }
        function f_isChecked(rowdata)
        {
            if (findCheckedCustomer(rowdata.homeChargeId) == -1)
                return false;
            return true;
        }
        function f_onCheckRow(checked, data)
        {
            if (checked) addCheckedCustomer(data.homeChargeId);
            else removeCheckedCustomer(data.homeChargeId);
        }
        function f_getChecked()
        {
            alert(checkedCustomer.join(','));
        }
        
        function f_getWhere()
        {
            if (!grid) return null;
            var clause = function (rowdata, rowindex)
            {
                var key = $("#txtKey").val();
                return rowdata.homeChargeId.indexOf(key) > -1;
            };
            return clause; 
        }
        function f_search()
        {
            //grid.options.data = $.extend(true, {}, CustomersData);
            grid.loadData(f_getWhere());
        }





    </script>
</head>
<body>
    <form id="form1" runat="server">
  <h3>示例三：使用服务器数据，并排序分页</h3>
  <div>
  获取选中的行： <input type="button" value="获取" onclick="f_getChecked()" />
  </div>
  <br />
  <div id="searchbar">
    主键：<input id="txtKey" type="text" />
    <input id="btnOK" type="button" value="button" onclick="f_search()" />
</div>


    <div id="maingrid3"></div>
       <br />   <br />   <br />
    <div id="message"></div>
      <div style="display:none;">
      <!--  数据统计代码 -->
</div>
    </form>
</body>
</html>
